我来帮你美化这个 404 页面，让它在视觉上更加吸引人： ```vue
<template>
  <div
    class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100"
  >
    <div class="text-center px-4">
      <h1
        class="text-6xl md:text-8xl font-bold text-gray-800 mb-4 animate-pulse"
      >
        404
      </h1>
      <p class="text-2xl md:text-3xl text-gray-600 mb-8">
        Oops! Page Not Found
      </p>
      <div class="mb-10">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-48 w-48 mx-auto text-gray-300"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </div>
      <button
        @click="goHome"
        class="btn btn-primary btn-lg px-8 py-3 text-lg font-semibold transition-all duration-300 transform hover:scale-105"
      >
        ← Back to Home
      </button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

function goHome() {
  router.push("/");
}
</script>
